Style sheet change APP.CSS & INDEX.CSS#328
Open
Maheshghosh wants to merge 1 commit into
Open
Conversation
✅ Deploy Preview for github-spy ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
📝 WalkthroughWalkthroughApp.css and index.css replace hardcoded CSS styling with a Tailwind-aligned theme system. App.css introduces ChangesCSS Component System & Animation Refactor
🎯 2 (Simple) | ⏱️ ~12 minutes Possibly Related PRs
Suggested Labels
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 inconclusive)
✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
There was a problem hiding this comment.
🎉 Thank you @Maheshghosh for your contribution. Please make sure your PR follows https://github.com/GitMetricsLab/github_tracker/blob/main/CONTRIBUTING.md#-pull-request-guidelines
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
src/index.css (1)
164-167: ⚡ Quick winComplete reduced-motion handling for hover transforms.
Line 173 disables animation, but hover scaling still introduces motion (Lines 166 and 191). Disable transform transitions/hover transforms under reduced motion.
Accessibility-focused tweak
`@media` (prefers-reduced-motion: reduce) { .flow-line--horizontal, .flow-line--vertical { animation: none; } + + .flow-line, + .icon { + transition: none; + } + + .flow-line:hover, + .icon:hover { + transform: none; + } }Also applies to: 173-177, 190-192
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/index.css` around lines 164 - 167, The hover scale still moves when users prefer reduced motion; update the CSS to fully disable transforms and transition animations under reduced-motion by adding a prefers-reduced-motion media rule that targets .flow-line (and its hover state) and removes/overrides transform and transition properties so no scaling or transform transitions occur for users with reduced motion; ensure the rule also covers any related selectors that apply hover transforms elsewhere (e.g., the same .flow-line used in lines ~173-177 and ~190-192) so both the base and :hover states are overridden.src/App.css (1)
43-50: ⚡ Quick winTokenize global body colors to keep theme switching functional.
Line 43 and Line 49 are hardcoded values; this can bypass theme overrides. Move these to CSS variables so dark/light themes can swap them consistently.
Proposed refactor
:root { + --page-bg-start: `#0f172a`; + --page-bg-end: `#111827`; + --text-color: `#ffffff`; --max-width: 1280px; ... } body { ... - background: linear-gradient( - 135deg, - `#0f172a`, - `#111827` - ); - color: white; + background: linear-gradient(135deg, var(--page-bg-start), var(--page-bg-end)); + color: var(--text-color); ... }🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/App.css` around lines 43 - 50, The global body background and text color are hardcoded in App.css (the linear-gradient start/end colors and "color: white"), which prevents theme swaps; replace the hardcoded values with CSS variables (e.g., --bg-start, --bg-end, --text-color) and use them in the linear-gradient and color declarations in the body/global selector, and then ensure your light/dark theme rules (or :root and .theme-dark/.theme-light declarations) set those variables so theme switching updates the gradient and text color consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/App.css`:
- Around line 35-52: The CSS blocks (starting with the body selector and the
other selector blocks referenced) contain incorrect blank-line placement around
declarations that trigger stylelint's declaration-empty-line-before rule; open
each rule block (e.g., the body block and the other blocks flagged) and either
remove the extra empty lines between the selector and its first declaration or
add the single required empty line before declarations according to your
stylelint config so spacing matches the rule, then run stylelint autofix or the
linter to confirm no more declaration-empty-line-before violations.
- Around line 1-3: Remove the unused Tailwind directives from src/App.css:
delete the three lines containing "`@tailwind` base;", "`@tailwind` components;",
and "`@tailwind` utilities;" (or clear the file) since only src/index.css is
imported; verify no components import App.css (search for "App.css" and the App
component) before removing to avoid breaking imports.
In `@src/index.css`:
- Around line 59-76: The .flow-line rule block (and other selector blocks in
this CSS file with similar spacing) violates the stylelint
declaration-empty-line-before rule; fix by aligning blank-line placement with
the repo's stylelint config: either add or remove the empty line immediately
before each declaration group so each block matches the configured expectation,
and re-run stylelint --fix (or manually edit) to ensure all selector blocks
(including the ones flagged elsewhere in this file) follow the same
declaration-empty-line-before spacing rule.
- Around line 59-158: Replace the removed legacy CSS class names in the
components with the new BEM class names: in Tracker (update occurrences of
icon-merged, icon-pr-closed, icon-pr-open, icon-issue-closed, icon-issue-open)
change to icon--merged, icon--pr-closed, icon--pr-open, icon--issue-closed,
icon--issue-open respectively; in HowItWorks replace how-it-works-flow-line (and
its light variant) with flow-line--horizontal (and flow-line--light combined,
e.g., "flow-line--light flow-line--horizontal") or flow-line--vertical when
appropriate; ensure you only change className strings in the JSX (e.g., the
className props) and keep any other modifiers/spacing intact.
---
Nitpick comments:
In `@src/App.css`:
- Around line 43-50: The global body background and text color are hardcoded in
App.css (the linear-gradient start/end colors and "color: white"), which
prevents theme swaps; replace the hardcoded values with CSS variables (e.g.,
--bg-start, --bg-end, --text-color) and use them in the linear-gradient and
color declarations in the body/global selector, and then ensure your light/dark
theme rules (or :root and .theme-dark/.theme-light declarations) set those
variables so theme switching updates the gradient and text color consistently.
In `@src/index.css`:
- Around line 164-167: The hover scale still moves when users prefer reduced
motion; update the CSS to fully disable transforms and transition animations
under reduced-motion by adding a prefers-reduced-motion media rule that targets
.flow-line (and its hover state) and removes/overrides transform and transition
properties so no scaling or transform transitions occur for users with reduced
motion; ensure the rule also covers any related selectors that apply hover
transforms elsewhere (e.g., the same .flow-line used in lines ~173-177 and
~190-192) so both the base and :hover states are overridden.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
Author
|
Kindly marged the pull request |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Proper Architecture
Old:
.how-it-works-flow-line
New:
.flow-line
.flow-line--horizontal
.flow-line--vertical
.flow-line--light
Uses modern BEM-style scalable naming.
Removed Duplication repeated:
gradients
shadows
animation values
Now centralized with CSS variables.
Better Performance
Added:
will-change
translateZ(0)
backface-visibility
Improves animation rendering.
Better Theme System
Now dark mode is dynamic.
src/
│
├── styles/
│ ├── base/
│ │ ├── reset.css
│ │ ├── typography.css
│ │ └── variables.css
│ │
│ ├── components/
│ │ ├── flow-line.css
│ │ ├── icons.css
│ │ └── cards.css
│ │
│ ├── layouts/
│ │ ├── dashboard.css
│ │ └── sidebar.css
│ │
│ ├── themes/
│ │ ├── dark.css
│ │ └── light.css
│ │
│ └── globals.css
Summary by CodeRabbit